<script setup lang="ts">

import { useRoute } from 'vue-router';
import { useLayoutStore } from '../../stores/layout';
import { random } from '../../stores/util'
import { onMounted, onUnmounted } from 'vue';


const layout = useLayoutStore()
onMounted(() => {
  layout.headerSet(false)
})
onUnmounted(() => {
  layout.headerSet(true)
})

const route = useRoute()
const total = +(route.query.total || 60)
const showEq = +(route.query.eq || 0)

const initRow = () => {
  return {
    id: 0,
    n1: 0,
    n2: 0,
    op: '',
    eq: 0
  }
}

const additions = Array.from({ length: total * 4 }, (_, i) => {
  const row = initRow()
  const a = random(11, 29)
  const b = random(11, 29)

  if (a % 10 + b % 10 >= 10) {
    row.n1 = a
    row.n2 = b
    row.op = "+"
    row.eq = a + b
  }
  return row
}).filter(e => e.op).slice(0, total)

const subtraction = Array.from({ length: total * 4 }, (_, i) => {
  const row = initRow()
  const a = random(11, 29)
  const b = random(11, 29)

  if (a % 10 + b % 10 >= 10) {
    row.n1 = a + b
    row.n2 = a
    row.op = "-"
    row.eq = b
  }

  return row
}).filter(e => e.op).slice(0, total)

</script>

<template>
  <div class="container">
    <div class="grid grid-cols-3 gap-4 mt-4 mb-8">
      <h3 v-for="item in additions" :key="item.id"> {{ item.n1 }} {{ item.op }} {{ item.n2 }} =
        <span v-if="showEq"> {{ item.eq }}</span>
      </h3>
    </div>
    <div class="print-break"></div>
    <div class="grid grid-cols-3 gap-4">
      <h3 v-for="item in subtraction" :key="item.id"> {{ item.n1 }} {{ item.op }} {{ item.n2 }} =
        <span v-if="showEq"> {{ item.eq }}</span>
      </h3>
    </div>
  </div>
</template>

<style scoped>
@media print {
  .print-break {
    page-break-after: always;
  }
}
</style>
